<template>
      <div class="app-container">
            <div class="filter-container">
                  <div>
                        <el-select class="filter-item" v-model="userRight.companyId" placeholder="请选择企业" :disabled="userRight.disabled" @change="selectOutEnterprise">
                              <el-option v-for="enterprise in outenterpriseList" :key="enterprise.companyId" :label="enterprise.companyName" :value="String(enterprise.companyId)"></el-option>
                        </el-select>
      
                        <el-select class="filter-item" v-model="userRight.departId" placeholder="请选择账号组">
                              <el-option v-for="accountGroup in outaccountGroupList" :key="accountGroup.departId" :label="accountGroup.departName" :value="String(accountGroup.departId)"></el-option>
                        </el-select>
                        <el-button class="filter-item" @click="getList" type="primary" icon="search">搜索</el-button>
                  </div>
                  <div>
                        <el-input style="width: 218px;" class="filter-item" placeholder="请输入账号名称" @keyup.enter.native="handleFilter" v-model="listQuery.userName">
                        </el-input>
                        <el-button class="filter-item" @click="handleFilter">
                              筛选
                        </el-button>
                        <el-button class="filter-item" style="float:right" type="default" icon="edit" @click="handleCreate">
                              新建账号
                        </el-button>
                  </div>
            </div>
            <el-table :data="tableData" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
      
                  <el-table-column align="center" label="序号" width="65">
                        <template scope="scope">
                              <span>{{scope.$index+1+(listQuery.page-1)*listQuery.limit}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column align="left" label="帐号名称">
                        <template scope="scope">
                              <span>{{scope.row.userName}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="所在企业">
                        <template scope="scope">
                              <span>{{scope.row.companyName}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="账号组">
                        <template scope="scope">
                              <span>{{scope.row.departName}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="对应角色" width="100">
                        <template scope="scope">
                              <span>{{scope.row.roleNum}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="真实姓名" width="100">
                        <template scope="scope">
                              <span>{{scope.row.name}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="联系电话">
                        <template scope="scope">
                              <span>{{scope.row.contactPhone}}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="帐号状态">
                        <template scope="scope">
                              <span :class="scope.row.state=== '1' ?'infoColor':'silverColor'">{{ scope.row.state === '1' ?"正常":"锁定" }}</span>
                        </template>
                  </el-table-column>
      
                  <el-table-column label="操作" width="200">
                        <template scope="scope">
                              <el-button size="small" type="success" @click="handleUpdate(scope.row)">
                                    编辑
                              </el-button>
                              <el-button size="small" :type="scope.row.state=== '1' ?'default':'primary'" @click="handleModifyStatus(scope.row)">
                                    {{ scope.row.state=== '1' ? "锁定":"启用" }}
                              </el-button>
                              <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                                    删除
                              </el-button>
                        </template>
                  </el-table-column>
            </el-table>
            <div v-show="!listLoading" class="pagination-container">
                  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                  </el-pagination>
            </div>
            <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" size="small">
                  <div v-if="dialogFormVisible">
                        <el-form :model="temp" :rules="rules" ref="temp">
      
                              <el-form-item label="所属企业" prop="companyId" :label-width="formLabelWidth">
                                    <el-select v-model="temp.companyId" placeholder="请选择所属企业" :style="inputWidth" :disabled="temp.disabled" @change="selectEnterprise">
                                          <el-option v-for="enterprise in enterpriseList" :key="enterprise.companyId" :label="enterprise.companyName" :value="String(enterprise.companyId)"></el-option>
                                    </el-select>
                              </el-form-item>
      
                              <el-form-item label="帐号组名" prop="departId" :label-width="formLabelWidth">
                                    <el-select v-model="temp.departId" placeholder="请选择账号组" :style="inputWidth" @change="selectEnterpriseRole">
                                          <el-option v-for="accountGroup in accountGroupList" :key="accountGroup.departId" :label="accountGroup.departName" :value="String(accountGroup.departId)"></el-option>
                                    </el-select>
                              </el-form-item>
      
                              <el-form-item label="帐号名称" prop="account" :label-width="formLabelWidth">
                                    <el-input v-model="temp.account" placeholder="请使用用于登录的邮箱" auto-complete="off" :style="inputWidth" :disabled="temp.disabled" :maxlength="maxlength1"></el-input>
                              </el-form-item>
      
                              <el-form-item label="默认密码" :label-width="formLabelWidth">
                                    <el-input v-model="password" auto-complete="off" :style="inputWidth" :disabled="true"></el-input>
                                    <el-button size="small" @click="resetPwd">重置密码</el-button>
                              </el-form-item>
      
                              <el-form-item label="真实姓名" prop="name" :label-width="formLabelWidth">
                                    <el-input v-model="temp.name" auto-complete="off" :style="inputWidth" :maxlength="maxlength2"></el-input>
                              </el-form-item>
      
                              <el-form-item label="联系电话" prop="contactPhone" :label-width="formLabelWidth">
                                    <el-input v-model="temp.contactPhone" auto-complete="off" :style="inputWidth" :maxlength="maxlength3"></el-input>
                              </el-form-item>
      
                              <el-form-item label="角色配置" :label-width="formLabelWidth">
                                    <el-button size="small" @click="handleCheckAllChange">全选</el-button>
                                    <el-button size="small" @click="handleCancelAllChange">全不选</el-button>
                                    <div style="margin: 15px 0;"></div>
                                    <el-checkbox-group v-model="checkedRoles">
                                          <el-checkbox v-for="role in roles" :label="role.name" :key="role" :disabled="role.state">{{role.name}}</el-checkbox>
                                    </el-checkbox-group>
                              </el-form-item>
      
                        </el-form>
                  </div>
                  <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="create">确 定</el-button>
                  </div>
      
            </el-dialog>
      </div>
</template>
<script>
export default {
      data() {
            var existAccount = (rule, value, callback) => {
                  // console.log(value);
                  if (!value) {
                        callback(new Error('请输入账号名称'));
                  }
                  if (this.dialogStatus === 'create') {
                        setTimeout(() => {
                              var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                              // console.log(filter.test(value));

                              if (!filter.test(value)) {
                                    callback(new Error('请输入正确邮箱格式'));
                              } else {

                                    this.$http.get('/user/isExists?userName=' + value)
                                          .then((response) => {
                                                // console.log(response);
                                                if (response.code === 0) {
                                                      if (!response.data) {
                                                            callback();
                                                      } else {
                                                            callback(new Error('该帐号已存在，请重新输入!'));
                                                      }
                                                } else {
                                                      callback(new Error('请求错误!'));
                                                }
                                          }).catch((response) => {
                                                callback(new Error('错误'));
                                          })
                              }


                        }, 500);
                  } else {
                        callback();
                  }
            };
            return {
                  userRight: {
                        companyId: '',
                        departId: '',
                        disabled: false
                  },
                  superman: null,
                  tableData: null,
                  list: null,
                  listCopy: null,
                  total: null,
                  listLoading: true,
                  listQuery: {
                        page: 1,
                        limit: 10,
                        userName: ''
                  },
                  dialogFormVisible: false,
                  dialogStatus: '',
                  temp: {
                        companyId: '',
                        companyName: '',
                        departId: '',
                        departName: '',
                        account: '',
                        userId: '',
                        name: '',
                        state: '',
                        contactPhone: '',
                        disabled: false,
                  },
                  password: 'Aa123456',
                  enterpriseList: [],
                  accountGroupList: [],
                  outenterpriseList: [],
                  outaccountGroupList: [],
                  textMap: {
                        update: '编辑账号信息',
                        create: '新建账号信息'
                  },
                  inputWidth: {
                        width: '90%'
                  },
                  formLabelWidth: '100px',
                  rules: {
                        companyId: [
                              { required: true, message: '请选择企业名称', trigger: 'change' }
                        ],
                        departId: [
                              { required: true, message: '请选择帐号组名', trigger: 'change' }
                        ],
                        account: [
                              { validator: existAccount, required: true, trigger: 'blur' }
                        ],
                        name: [
                              { required: true, message: '请输入真实姓名', trigger: 'blur' }
                        ],
                        contactPhone: [
                              { required: true, message: '请输入有效的联系电话', trigger: 'blur' }
                        ]
                  },

                  rolelist: null,
                  checkedRoles: [],
                  checkedRolesTemp: [],
                  checkedRoles_copy: [],
                  roles: [],
                  checkallroles: [],
                  frontchecked: [],
                  addRoles: [],
                  delRoles: [],
                  maxlength1: 100,
                  maxlength2: 50,
                  maxlength3: 20
            }
      },
      created() {
            this.getUser()
            // this.getList();
      },
      methods: {
            getUser() {
                  this.$http.get('/user')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.superman = response.data.superman;
                                    if (response.data.superman === '1') {
                                          this.userRight.companyId = '';
                                          this.getList();
                                    } else {
                                          this.userRight.disabled = true;
                                          this.userRight.companyId = respons.data.companyId;
                                    }
                                    this.getOutEnterpriseList();
                              }
                        })
                        .catch(function (response) {
                              console.log(response);
                        })
            },
            getList() {
                  let role_id = '';
                  if (this.$route.query.id) { role_id = this.$route.query.id };
                  this.listLoading = true;
                  var url = '/users?companyId=' + this.userRight.companyId + '&departId=' + this.userRight.departId + '&roleId=' + role_id;
                  // console.log(url);
                  this.$http.get(url)
                        .then((response) => {
                              if (response.code === 0) {
                                    this.list = response.data;
                                    this.listCopy = response.data;
                                    this.total = response.data.length;
                                    this.listLoading = false;
                                    this.pageChange(this.listQuery.page);
                                    // console.log(this.list);
                              }
                        })
                        .catch(function (response) {
                              console.log(response)
                        })
            },
            //搜索筛选
            handleFilter() {
                  this.listCopy = this.list.filter(item => {
                        return item.userName.indexOf(this.listQuery.userName) > -1;
                  });
                  // console.log(this.listCopy);
                  this.total = this.listCopy.length;
                  this.pageChange(this.listQuery.page);
            },
            //以下，分页函数
            handleSizeChange(val) {
                  this.listQuery.limit = val;
                  this.pageChange(this.listQuery.page);
            },
            handleCurrentChange(val) {
                  this.listQuery.page = val;
                  this.pageChange(val);
            },
            pageChange(page) {
                  this.tableData = this.listCopy.slice((page - 1) * this.listQuery.limit, page * this.listQuery.limit);
            },
            //新建信息，弹对话框
            handleCreate() {
                  this.getEnterpriseList();
                  this.resetTemp();
                  this.dialogStatus = 'create';
                  this.dialogFormVisible = true;
            },
            //编辑信息
            handleUpdate(row) {
                  this.getEnterpriseList();
                  this.resetTemp();
                  this.checkedRoles_copy = [];
                  this.checkedRolesTemp = [];
                  this.checkallroles = [];
                  this.$http.get('/sys/depart/departInfo/' + row.companyId)
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.accountGroupList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response)
                        })
                  this.$http.get('/sys/depart/role/' + row.companyId)
                        .then((response) => {
                              if (response.code === 0) {
                                    var rolelist = response.data;
                                    // console.log(rolelist);
                                    rolelist.forEach((item) => {
                                          this.checkallroles.push(item.roleName);
                                    });
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
                  this.temp = Object.assign({}, row);
                  this.temp.account = row.userName;
                  this.dialogStatus = 'update';
                  this.selectEnterpriseRole(row.departId);
                  this.temp.disabled = true;
                  this.dialogFormVisible = true;
            },
            //改变状态
            handleModifyStatus(row) {
                  const h = this.$createElement;
                  var title = '';
                  var message = '';
                  var change = '';
                  var url = ''
                  var account = row.userName;
                  if (row.state === '1') {
                        title = '锁定帐号';
                        message = h('p', null, [h('span', null, '是否锁定 '), h('span', { style: 'color: #20A0FF' }, account), h('span', null, ' 这个账号？锁定后该账号将无法正常登录。')]);
                        change = '锁定成功';
                        url = '/user/' + row.userId + '/lock';
                  } else {
                        title = '解锁帐号';
                        message = '是否解锁该帐号？';
                        change = '解锁成功'
                        url = '/user/' + row.userId + '/unlock';
                  }
                  this.$msgbox({
                        title: title,
                        message: message,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        showCancelButton: true,
                        type: 'warning'
                  }).then(action => {
                        if (action === 'confirm') {
                              this.$http.put(url)
                                    .then((response) => {
                                          // console.log(response);
                                          row.state = row.state === '1' ? '2' : '1';
                                          this.showMessage(change, "success");
                                    })
                                    .catch(function (response) {
                                          console.log(response);
                                          this.showMessage('系统错误!', 'error');
                                    })
                        } else {
                              this.showMessage('已取消更改!', 'info');
                        }
                  }).catch(() => {
                        this.showMessage('已取消更改!', 'info');
                  });
            },
            //删除信息
            handleDelete(row) {
                  // console.log(row);
                  const h = this.$createElement;
                  var message = h('p', null, [h('span', null, '是否删除 '), h('span', { style: 'color: #f00' }, row.userName), h('span', null, ' 这个账号')]);
                  var url = '/user/' + row.userId;
                  this.$msgbox({
                        title: '删除账号',
                        message: message,
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                  }).then((action) => {
                        if (action === 'confirm') {
                              this.$http.delete(url)
                                    .then((response) => {
                                          if (response.code === 0) {
                                                this.showMessage("删除成功!", "success");
                                                if (this.superman === '1') {
                                                      this.userRight.companyId = '';
                                                      this.userRight.departId = '';
                                                } else {
                                                      this.userRight.departId = '';
                                                }
                                                this.getList();
                                          } else if (response.code === 80) {

                                                this.$confirm('该账号组所属的企业已被锁定，请联系管理员进行解锁', '无法操作该账号组', {
                                                      confirmButtonText: '确定',
                                                      showCancelButton: false,
                                                      type: 'error'
                                                }).then(() => {
                                                      this.dialogFormVisible = false;
                                                })
                                          } else {
                                                console.log(response.msg);
                                                this.showMessage('系统错误!', 'error');
                                          }
                                    })
                                    .catch(function (response) {
                                          console.log(response)
                                    })
                        } else {
                              this.showMessage('已取消更改!', 'info');
                        }
                  }).catch(() => {
                        this.showMessage('已取消删除!', 'info');
                  });
            },
            //确认新建信息
            create() {
                  // console.log(this.temp);
                  // console.log(this.checkedRoles);
                  var url = '';
                  var selectRoles = [];
                  this.roles = [];
                  this.$refs['temp'].validate((valid) => {
                        if (valid) {
                              if (this.dialogStatus === 'create') {
                                    // console.log(this.rolelist);
                                    // console.log(this.checkedRoles);
                                    this.checkedRoles.forEach((item) => {
                                          this.rolelist.roles.forEach((n) => {
                                                if (item === n.roleName) {
                                                      selectRoles.push(n.roleId);
                                                }
                                          });
                                    });
                                    // console.log(selectRoles);
                                    url = '/user';
                                    this.$http.post(url, {
                                          "companyId": this.temp.companyId,
                                          "departId": this.temp.departId,
                                          "account": this.temp.account,
                                          "passwd": this.password,
                                          "name": this.temp.name,
                                          "contactPhone": this.temp.contactPhone,
                                          "roles": selectRoles,
                                          "state": "1"
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.dialogFormVisible = false
                                                      this.showMessage('创建成功!', 'success');
                                                      if (this.superman === '1') {
                                                            this.userRight.companyId = '';
                                                            this.userRight.departId = '';
                                                      } else {
                                                            this.userRight.departId = '';
                                                      }
                                                      this.getList();
                                                } else if (response.code === 80) {

                                                      this.$confirm('该账号组所属的企业已被锁定，请联系管理员进行解锁', '无法操作该账号组', {
                                                            confirmButtonText: '确定',
                                                            showCancelButton: false,
                                                            type: 'error'
                                                      }).then(() => {
                                                            // this.dialogFormVisible = false;
                                                      })
                                                } else {
                                                      this.dialogFormVisible = false
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              } else {
                                    // console.log(this.rolelist);
                                    // console.log(this.checkedRoles);

                                    this.addRoles = [];
                                    this.delRoles = [];
                                    this.checkedRoles.forEach((item) => {
                                          this.rolelist.roles.forEach((n) => {
                                                if (item === n.roleName) {
                                                      selectRoles.push(n.roleId)
                                                }
                                          });
                                    });
                                    // console.log(this.frontchecked);
                                    // console.log(selectRoles);
                                    let aSet = new Set(this.frontchecked);
                                    let bSet = new Set(selectRoles);
                                    let intersection = Array.from(new Set(this.frontchecked.filter(v => bSet.has(v))));
                                    // console.log(intersection);
                                    let cSet = new Set(intersection);
                                    this.delRoles = Array.from(new Set(this.frontchecked.concat(intersection).filter(v => !aSet.has(v) || !cSet.has(v))));
                                    this.addRoles = Array.from(new Set(selectRoles.concat(intersection).filter(v => !bSet.has(v) || !cSet.has(v))))
                                    // console.log(this.addRoles);
                                    // console.log(this.delRoles);
                                    url = '/user';
                                    this.$http.put(url, {
                                          "userId": this.temp.userId,
                                          "departId": this.temp.departId,
                                          "account": this.temp.account,
                                          "name": this.temp.name,
                                          "contactPhone": this.temp.contactPhone,
                                          "roles": { "addRoles": this.addRoles, "delRoles": this.delRoles },
                                    })
                                          .then((response) => {
                                                if (response.code === 0) {
                                                      this.dialogFormVisible = false;
                                                      this.showMessage('修改成功!', 'success');
                                                      if (this.superman === '1') {
                                                            this.userRight.companyId = '';
                                                            this.userRight.departId = '';
                                                      } else {
                                                            this.userRight.departId = '';
                                                      }
                                                      this.getList();
                                                } else if (response.code === 80) {

                                                      this.$confirm('该账号组所属的企业已被锁定，请联系管理员进行解锁', '无法操作该账号组', {
                                                            confirmButtonText: '确定',
                                                            showCancelButton: false,
                                                            type: 'error'
                                                      }).then(() => {
                                                            this.dialogFormVisible = false;
                                                      })
                                                } else {
                                                      this.dialogFormVisible = false;
                                                      console.log(response.msg);
                                                      this.showMessage('系统错误!', 'error');
                                                }
                                          }).catch((response) => {
                                                console.log(response);
                                          })
                              }
                        } else {
                              console.log('error submit!!');
                              return false;
                        }
                  });
            },
            //置空temp数据，防止绑定信息
            resetTemp() {
                  if (this.$refs['temp']) {
                        this.$refs['temp'].resetFields();
                  }

                  this.temp = {
                        companyId: '',
                        companyName: '',
                        departId: '',
                        departName: '',
                        account: '',
                        userId: '',
                        name: '',
                        contactPhone: '',
                        disabled: false,
                        state: '1'
                  };
                  this.accountGroupList = [];
                  this.enterpriseList = [];

                  this.checkedRoles = [];
                  this.roles = [];
            },
            //上方提示消息
            showMessage(msg, type) {
                  this.$message({
                        message: msg,
                        type: type
                  });
            },
            //多选框
            handleCheckAllChange() {
                  this.checkedRoles = this.checkallroles;
            },
            handleCancelAllChange() {
                  this.checkedRoles = this.checkedRoles_copy;
            },
            //页面获取企业列表下拉框
            getOutEnterpriseList() {
                  this.$http.get('/sys/company/alllist')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.body.data);
                                    response.data.unshift({ companyId: '-1', companyName: '全部企业' });
                                    this.outenterpriseList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            //页面选择企业获取账号组
            selectOutEnterprise(val) {
                  // console.log(val);
                  this.userRight.departId = '';
                  this.$http.get('/sys/depart/departInfo/' + val)
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response);
                                    // console.log(response.data);
                                    if (response.data.length > 1) {
                                          response.data.unshift({ departId: '-1', departName: '全部账号组' });
                                    }
                                    this.outaccountGroupList = response.data;
                              } else {
                                    console.log(response.msg)
                              }
                        }).catch((response) => {
                              console.log(response)
                        })
            },
            //弹框获取企业列表下拉框
            getEnterpriseList() {
                  this.$http.get('/sys/company/alllist')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.enterpriseList = response.data;
                              } else {
                                    console.log(response.msg);
                              }
                        }).catch((response) => {
                              console.log(response);
                        })
            },
            //弹框选择企业变化角色事件
            selectEnterprise(val) {
                  // console.log(val);
                  this.roles = [];
                  this.checkallroles = [];
                  this.temp.departId = '';
                  var url = '/sys/depart/role/' + val;
                  if (this.temp.disabled === false && val != '') {
                        this.$http.get(url)
                              .then((response) => {
                                    if (response.code === 0) {
                                          var rolelist = response.data;
                                          // console.log(rolelist);
                                          if (rolelist.length === 0) {
                                                this.$confirm('该企业内还没有任何角色，请先新建角色之后再新建账号', '无法新建帐号', {
                                                      confirmButtonText: '确定',
                                                      showCancelButton: false,
                                                      type: 'error'
                                                }).then(() => {
                                                      this.temp.companyId = '';
                                                })
                                          } else {
                                                rolelist.forEach((item) => {
                                                      this.checkallroles.push(item.roleName);
                                                });

                                                this.$http.get('/sys/depart/departInfo/' + val)
                                                      .then((response) => {
                                                            if (response.code === 0) {

                                                                  if (response.data.length < 1) {
                                                                        this.$confirm('该企业内还没有任何账号组，请先新建账号组之后再新建账号', '无法新建帐号', {
                                                                              confirmButtonText: '确定',
                                                                              showCancelButton: false,
                                                                              type: 'error'
                                                                        }).then(() => {
                                                                              this.temp.companyId = '';
                                                                        })
                                                                  } else {
                                                                        console.log(response.data);
                                                                        this.accountGroupList = response.data;

                                                                  }
                                                            } else {
                                                                  console.log(response.msg)
                                                            }
                                                      }).catch((response) => {
                                                            console.log(response)
                                                      })
                                          }
                                    } else {
                                          console.log(response.msg);
                                    }
                              }).catch((response) => {
                                    console.log(response);
                              })
                  }
            },
            //选择账号组确定的角色
            selectEnterpriseRole(val) {
                  // console.log(this.temp.userId);
                  this.roles = [];
                  this.checkedRoles = [];
                  this.checkedRoles_copy = [];
                  this.checkedRolesTemp = [];
                  var url = '/sys/depart/detail/' + this.temp.departId;
                  if (val != '') {
                        this.$http.get(url)
                              .then((response) => {
                                    if (response.code === 0) {
                                          // console.log(response);
                                          this.rolelist = response.data;
                                          // console.log(this.rolelist.roles);
                                          this.rolelist.roles.forEach((item, i) => {
                                                if (item.selectState === true) {
                                                      this.checkedRolesTemp.push(item.roleName);
                                                }
                                                this.roles.push({
                                                      name: item.roleName,
                                                      state: item.selectState
                                                })
                                          });
                                          if (this.dialogStatus === 'create') {
                                                this.checkedRoles = this.checkedRolesTemp;

                                          } else {
                                                this.frontchecked = [];
                                                this.$http.get('/user/' + this.temp.userId)
                                                      .then((response) => {
                                                            if (response.code === 0) {
                                                                  // console.log(response);
                                                                  this.rolelist.roles.forEach((item) => {
                                                                        response.data.roles.forEach((i) => {
                                                                              if (item.roleId === i) {
                                                                                    this.checkedRoles.push(item.roleName);
                                                                              }
                                                                        });
                                                                  });
                                                                  this.roles.forEach((item) => {
                                                                        if (item.state === true && this.checkedRoles.indexOf(item.name) === -1) {
                                                                              this.checkedRoles.push(item.name);
                                                                        }
                                                                  });
                                                                  this.frontchecked = response.data.roles;
                                                                  // console.log(this.checkedRoles);
                                                            } else {
                                                                  console.log(response.msg);
                                                            }
                                                      })
                                          }
                                          this.checkedRoles_copy = this.checkedRolesTemp;
                                    } else {
                                          console.log(response.msg);
                                    }
                              })
                  }
            },
            resetPwd() {
                  // console.log(this.temp.userId);
                  this.$http.put('/user/'+ this.temp.userId + '/resetPassword?newPassword=Aa123456')
                        .then((response) => {
                              if (response.code === 0) {
                                    // console.log(response.data);
                                    this.showMessage("重置密码成功!", "success");
                              }
                        })
                        .catch(function (response) {
                              console.log(response);
                        })
            }
      }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container {
      padding-bottom: 10px;
      .filter-item {
            margin-bottom: 10px;
      }
}

.pagination-container {
      margin-top: 30px;
}

.infoColor {
      color: #58B7FF
}

.silverColor {
      color: #8492A6
}
</style>